<template>
	<view class="content">
		<view v-if="list.length > 0">
			<view  class="geren" style="padding: 10upx 0;background-color: white;display: flex;flex-direction: column;text-align: center;font-size: 30upx;">
				<text>
					犬主姓名：
					<text>{{ mapData.name }}</text>
				</text>
				<text>
					主人电话：
					<text>{{ mapData.phone }}</text>
				</text>
			</view>
			<view class="bg">
				<view  class="card" v-for="val of list" v-if="val.examine === 1" :key="val.dogId">
					<!-- <view v-if="val.status!==2"> -->
					<view class="top">
						<view class="left">
							<image :src="val.dogAvatar" mode=""></image>
							<text>{{ val.dogName }}</text>
							<text>({{ val.retriever }})</text>
							<text>状态：{{ type[val.status] }}</text>

							<!-- <button type="default" size="mini">
							<image src="../../static/img/biangeng.png" mode=""></image>
							信息变更
						</button> -->
						</view>
						<view class="right">
							<text @longtap="fuzhi(val.dogId)">
								犬只ID：
								<text>{{ val.dogId }}</text>
							</text>
							<text>
								年审状态：
								<text>{{ val.nianjian }}</text>
							</text>
							<text>
								免疫状态：
								<text>{{ val.immunety }}</text>
							</text>
							<text>
								下次年检时间：
								<text>{{ val.nsendtime | jiequ }}</text>
							</text>
							<text>
								下次免疫接种时间：
								<text>{{ val.nimmunetime | jiequ }}</text>
							</text>
						</view>
					</view>

					<view class="nav">
						<view @tap="goCf(val.dogId)">
							<text>处罚提醒</text>
							<text>{{ val.cn }}次</text>
						</view>
						<view>
							<text>免疫提醒</text>
							<text>{{ val.my }}天</text>
						</view>
						<view>
							<text>年检提醒</text>
							<text>{{ val.nj }}天</text>
						</view>
					</view>
					<!-- </view> -->
					
				</view>
			</view>
		</view>
		<view class="btn" v-else>
			<button @tap="toBind">
				<image src="../../static/img/wx.png" mode=""></image>
				绑定微信
			</button>
		</view>
	</view>
</template>

<script>
import CHONG from '../../static/js/function.js';
import { mapState, mapMutations } from 'vuex';
export default {
	computed: mapState(['URL', 'TOKEN']),
	data() {
		return {
			hit:0,
			mapData: {},
			list: [],
			isShow: true,
			type: ['正常', '狂犬', '注销', '丢失', '死亡']
		};
	},
	methods: {
		...mapMutations(['GET_TOKEN', 'LOGIN']),
		getUser() {
			console.log(this.TOKEN);
			uni.request({
				url: this.URL + 'getUserByOpenId1',
				data: {
					wxid: this.TOKEN
				},
				success: res => {
					if (res.data.success) {
						let json = res.data;
						this.mapData = json.mapData;
						this.list = json.data;
						console.log('list');
						console.log(this.list);
					}
					console.log(this.TOKEN);
					// console.log(res.data);
				}
			});
		},
		fuzhi(e) {
			uni.setClipboardData({
				data: e,
				success: function() {
					console.log('复制成功');
				}
			});
		},
		toBind() {
			uni.redirectTo({
				url: './bind'
			});
		},
		goCf(e) {
			uni.navigateTo({
				url: 'cfXQ?id=' + e
			});
		}
	},
	onLoad() {
		console.log(this.TOKEN);
		this.getUser();
	}
};
</script>

<style lang="scss">
.bg {
	// background: $chong-iconbg-color;
	height: 230upx;
	padding: 20upx;
	.card {
		margin: 20upx;
		border-radius: 50upx;
		background: white;
		display: flex;
		flex-direction: column;
		padding: 36upx;
		box-shadow: 0upx 3upx 6upx rgba($chong-text-color, 0.71);
		.top {
			display: flex;

			.left {
				margin-right: 30upx;
				width: 180upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				& > image {
					width: 180upx;
					height: 180upx;
					border-radius: 20upx;
				}
				text {
					font-size: 24upx;
					line-height: 38upx;
				}
				text:nth-of-type(2) {
					color: $chong-text-color;
				}
				button {
					margin-top: 10upx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0;
					width: 100%;
					image {
						width: 40upx;
						height: 40upx;
					}
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				flex: 1;
				text {
					font-size: 26upx;
					line-height: 52upx;
					color: $chong-text-color;
					border-bottom: 1upx solid rgba($chong-text-color, 0.71);
					text {
						border: none;
						color: rgba(53, 53, 53, 1);
					}
				}
			}
		}
	}
}
.nav {
	margin-top: 40upx;
	display: flex;
	justify-content: space-between;
	view {
		box-sizing: border-box;
		text-align: center;
		width: 150upx;
		height: 100upx;
		display: flex;
		flex-direction: column;
		font-size: 26upx;
		background: linear-gradient(left, #fa9821, #ffbf68);
		border-radius: 20upx;
		color: white;
		text:nth-of-type(2) {
			text-align: center;
			font-size: 36upx;
			padding-top: 10upx;
		}
	}
	view:nth-of-type(2) {
		background: linear-gradient(left, #928cfb, #bfbdfe);
	}
	view:nth-of-type(3) {
		background: linear-gradient(left, #3796fc, #a9d2fe);
	}
}
.btn {
	display: flex;
	align-content: center;
	margin-top: 200upx;
	button {
		display: flex;
		justify-content: center;
		align-items: center;
		color: $chong-text-color;
		font-size: 30upx;
		line-height: 90upx;
		image {
			width: 50upx;
			height: 50upx;
			padding-right: 20upx;
		}
	}
}
</style>
